<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加作业</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type='text/javascript' src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type='text/javascript' src='../js/libs/sui/sm.min.js' charset='utf-8'></script>
    <script src="../js/libs/juicer-min.js"></script>
    <script src="../js/libs/jquery.md5.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<!--消息中心-->
<div class="page">
    <!-- 头部-->
    <div class="head-no-toolbar bg-self-green no-left-icon">
        <span class="icon iconfont c-white p-l" onclick="javascript:api.closeWin();">&#xe61f;</span>
        <span class="c-white t-center">添加作业</span>
    </div>
    <div class="content p-t22 add-homework">
        <div class="content-block">
            <div class="list-block m-t-0">
                <form id="resume_form" action="">
                    <input type="hidden" name="addhomework_id"/>
                    <div class="table-wrap bg-white p-5">
                        <table>
                            <tr>
                                <td class="t-top" colspan="2">
                                    <div class="item-content">

                                        <div class="item-title label">题目套数</div>
                                        <div class="item-input c-gray">
                                            <input id="homework-sets" type="number" placeholder="请输入题目套数">
                                        </div>

                                    </div>
                                    <!--<textarea class="c-gray" id="area1" name="work_con" placeholder="请输入作业内容"></textarea>-->
                                    <!--<span class="wordWrap">-->
                                        <!--<var class="word word1">0</var>&nbsp;/&nbsp;<var class="wordMax"></var>-->
                                    <!--</span>-->
                                </td>
                            </tr>
                            <tr>

                                <td colspan="2">
                                    <div class="item-content">

                                        <div class="item-title label">题目类型</div>

                                        <div class="item-input c-gray">
                                            <select id="homework-type">
                                                <!--<option>请选择</option>-->
                                                <!--<option>否</option>-->
                                            </select>
                                        </div>

                                    </div>
                                </td>

                            </tr>
                            <tr>

                                <td colspan="2">
                                    <div class="item-content">

                                            <div class="item-title label">得分</div>
                                            <div class="item-input c-gray">
                                                <input id="homework-score" type="number" placeholder="请输入分数">
                                            </div>

                                    </div>
                                </td>
                                <!--<td class="t-top pos-rel" colspan="2">-->
                                    <!--<div class="area-title">完成情况</div>-->
                                    <!--<textarea class="c-gray" id="area2" name="describle" placeholder="请输入完成情况说明"></textarea>-->
                                    <!--<span class="wordWrap">-->
                                        <!--<var class="word word2">0</var>&nbsp;/&nbsp;<var class="wordMax">100</var>-->
                                    <!--</span>-->
                                <!--</td>-->
                            </tr>
                            <tr>
                                <td class="t-top pos-rel" colspan="2">
                                    <div class="area-title">备注</div>
                                    <textarea class="c-gray" id="area2" name="describle"
                                              placeholder="请输入备注(选填)"></textarea>
                                <span class="wordWrap">
                                <var class="word word2">0</var>&nbsp;/&nbsp;<var class="wordMax">100</var>
                                </span>
                                </td>
                                <!--<td colspan="2">-->
                                    <!--<div class="item-content">-->

                                            <!--<div class="item-title label">备注</div>-->
                                            <!--<div class="item-input c-gray">-->
                                                <!--<input id="homework-remark" type="text" placeholder="请输入备注(选填)">-->
                                            <!--</div>-->

                                    <!--</div>-->
                                <!--</td>-->
                            </tr>
                            <tr>
                                <td colspan="2">添加图片</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="add-img-td">
                                    <div class="wrap">
                                        <!--<div class="item-img">-->
                                        <!--<div class="img-wrap">-->
                                        <!--<img src="../images/my-center-header.jpg" alt=""/>-->



                                        <!--&lt;!&ndash;<div class="img-close">&ndash;&gt;-->
                                        <!--&lt;!&ndash;<span class="icon iconfont icon-guanbi c-default"></span>&ndash;&gt;-->
                                        <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                        <!--</div>-->
                                        <!--</div>-->
                                        <!--<div class="item-img">-->
                                            <!--<div class="img-wrap">-->
                                                <!--<img src="../images/portrait.jpg" alt=""/>-->
                                            <!--</div>-->
                                        <!--</div>-->

                                        <div class="item-img add-img">
                                            <div class="img-wrap clearfix">
                                                <!--<div class="left pos-rel">-->
                                                    <!--<span class="icon icon iconfont icon-paizhao"></span>-->
                                                    <!--<div>拍照 </div>-->
                                                <!--</div>-->
                                                <div id="camera" class="right pos-rel">
                                                    <div>拍照</div>
                                                    <span class="icon icon iconfont icon-paizhao"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item-img add-img">
                                            <div class="img-wrap clearfix">
                                                <!--<div class="left pos-rel">-->
                                                    <!--<span class="icon icon iconfont icon-paizhao"></span>-->

                                                    <!--<div>拍照</div>-->
                                                <!--</div>-->
                                                <div id="library" class="right pos-rel">
                                                    <div>图库</div>
                                                    <span class="icon icon iconfont icon-tuku"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="content-block">
                        <div class="row">
                            <div class="col-80 t-center">
                                <a id="save_btn" href="javascript:void(0);" class="button button-big button-fill button-success">确定</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script id="homework-type-tpl" type="text/template">
    <option>请选择</option>
    {@each typeList as it,index}
    <option>&{it.CODE_NAME}</option>
    {@/each}
</script>
<script>
    apiready=function(){
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

        //是否已添加图片
//        var addImageFlag=false;

        //使每一个缩略图的高宽相等
        $(document).ready(function(){
            $(".item-img").css("height",$(".item-img").width()+10+"px");
        });
        //点击保存获取全部src
//        $("#save_btn").click(function(){
//            var urldata=[];
//            var $urlNode=$(".add-homework .wrap img");
//            for(var i=0;i<$urlNode.length;i++){
//                urldata[i]=$urlNode.eq(i).attr("src");
//            }
//
//        });
        // 实时计算剩余字数函数
        function textareaNum(textareaNode, numNode, max) {
            var area = $(textareaNode)
            var numNode = $(numNode);
            area.attr('maxlength', max);
            numNode.next().text(max);
            area.on('input propertychange', function () {
                var _value = $(this).val().replace(/\n/gi, "");
                numNode.text(_value.length);
                $(this).css("height",$(this).prop("scrollHeight")+"px")
            });
        }
        // 调用计算字数函数
//        textareaNum("#area1", ".wordWrap .word1", 1000);
        textareaNum("#area2", ".wordWrap .word2", 100);

        //点击上传图片缩略图 添加删除按钮
        $(".add-homework").on("click",".img-wrap",function(){
            if($(this).find("img").length==1){
                if($(this).find(".img-close").length==0){
                    $(this).css("border-color","#ec9d9d")
                            .append('<div class="img-close">\
                        <span class="icon iconfont icon-guanbi"></span>\
                    </div>');
                }else{
                    $(this).css("border-color","#e7e7e7")
                            .find(".img-close").remove();
                }
            }
        });

        //点击删除按钮 删除当前 缩略图
        $(".add-homework").on("click",".img-close",function(){
            $(this).parents(".item-img").detach();
//            addImageFlag=false;
        });

        //学生id
        var stuInfo=getLoginStudentInfo();
        //课程表id
        var clazzId=api.pageParam.clazzId;
        //查询题目类型
        var typeSql="SELECT * FROM su_code_base B WHERE B.CODE_TYPE='TITLE_TYPE'";


        var typeData;
        //得到题目类型
        getHomeworkType();


//        //点击添加图片(拍照)
//        $(".add-homework").on("click",".left",function(){
//            getImage("camera");
//
//        });
//        //点击添加图片(图库)
//        $(".add-homework").on("click",".right",function(){
//
//            getImage("library");
//
//        });

        //点击添加图片(拍照)
        $(".add-homework").on("click","#camera",function(){
            getImage("camera");

        });
        //点击添加图片(图库)
        $(".add-homework").on("click","#library",function(){

            getImage("library");

        });


        function getHomeworkType(){

            dbQuery(1, 10, typeSql, true, function (ret, err) {
                if (isObject(ret) && (ret.statusCode == 0)) {
                    if (ret.result.length != 0) {
                        typeData = {
                            typeList: ret.result
                        };
                        setTaskType("TaskType",typeData.typeList);
                        $("#homework-type").html(juicer($("#homework-type-tpl").html(), typeData));
                    } else {
                        toast("暂无题目类型");
                    }
                }
            });

        }


        //点击确定上传作业
        $(".add-homework").on("click","#save_btn",function(){

            //题目套数
            var hwSets=$("#homework-sets").val();
            //题目类型
            var hwType=$("#homework-type").val();
            //作业分数
            var hwScore=$("#homework-score").val();

            var hwRemark=$("#area2").val();

            var imgUrls=getImageUrls();

            if(getstrlength(hwSets)==0){
                toast("请填写题目套数");
                return;
            }

            if(isEmpty(hwType)||hwType=="请选择"){
                toast("请选择题目类型");
                return;

            }


            if(getstrlength(hwScore)==0){
                toast("请填写分数");
                return;
            }

            if(imgUrls.length==0){
                toast("请添加图片");
                return;
            }

            var success=0;
            //task_id
            var uuid = getUUID();
            //遍历上传图片
            for (var i = 0; i < imgUrls.length; i++) {
                uploadWorkImage(stuInfo.STUDENT_ID + "", imgUrls[i], uuid, true, function (ret, err, remotePath) {
                    if (isObject(ret) && (ret.statusCode == 0)) {
//                        var imgPath = ret.result;
                        success+=1;
                        if(success==imgUrls.length){
                            //插入作业表
                            saveHomework(uuid, hwSets, hwType, hwScore, hwRemark,imgUrls);
                        }

                    } else {
                        toast("上传图片失败");
                    }
                });

            }


        });

        function saveHomework(uuid,hwSets,hwType,hwScore,hwRemark,imageUrls){

            var sql="INSERT INTO stu_task VALUES ('{0}', null, null, '{1}', '{2}', '{3}', '{4}', '{5}', '{6}', '{7}', '{8}', null)";

            //插入作业表
            dbExecute(sql.format(uuid,clazzId,stuInfo.STUDENT_ID,stuInfo.STUDENT_NAME,hwSets,getTypeId(hwType),hwScore,hwRemark,getCurrTime()),true,function(ret,err){

                if (isObject(ret) && (ret.statusCode == 0)) {
                    //插入图片表
                    saveImage(uuid,imageUrls);

                }else{
                    toast("添加失败");
                }
            });
        }

        function saveImage(uuid,imageUrls){

           var success=0;
            var sql="INSERT INTO stu_task_file(FILE_ID, TASK_ID, FILE_PAHT) VALUES ('{0}', '{1}', '{2}')";

            for(var i=0;i<imageUrls.length;i++){

                //插入作业图片表
                dbExecute(sql.format(getUUID(),uuid,imageUrls[i]),true,function(ret,err){
                    if (isObject(ret) && (ret.statusCode == 0)) {

                        success+=1;
                        if(success==imageUrls.length){

                            toast("添加成功");

                            closeWin();
                            //发送添加作业事件
                            api.sendEvent({
                                name: 'workEvent'
                            });
                        }

                    }else{
                        toast("添加图片失败");
                    }
                });
            }
        }



        //获取图片类型id
        function getTypeId(hwType){

            for(var i=0;i<typeData.typeList.length;i++){

                if(hwType==typeData.typeList[i].CODE_NAME){

                    return typeData.typeList[i].CODE;

                }

            }

        }


        //得到所有所选择的图片路径
        function getImageUrls(){
            var urldata=[];
            var $urlNode=$(".add-homework .wrap img");
            for(var i=0;i<$urlNode.length;i++){
                urldata[i]=$urlNode.eq(i).attr("src");
            }
            return urldata;
        }

        //从本地获取图片
        function getImage(type){
            getPicture(0,0,type,function(ret,err){
                if (isObject(ret)) {
                    var url = ret.data;
                    if(isNotEmpty(url)){

                        $(".add-img-td .wrap").prepend('<div class="item-img">\
                                                            <div class="img-wrap">\
                                                            <img src=' + url + ' alt=""/>\
                                                            </div>\
                                                       </div>')
                                .find(".item-img").css("height", $(".add-img").css("height"));
                    }

                }
            });
        }



        /*
        //学生id
        var stuId=getLoginStudentInfo().STUDENT_ID;
        //课程表id
        var scheduleId=api.pageParam.scheduleId;
        //插入作业数据sql
        var sql="INSERT INTO s_assignment (SCHEDULE_ID,STUDENT_ID,SUBMIT_DATE,CONTENT,COMPLETE_DESC,PHOTO_FILE) VALUES('{0}','{1}','{2}','{3}','{4}','{5}')";

        //上传操作

        //点击确定上传作业
        $(".add-homework").on("click","#save_btn",function(){

            //作业内容
            var content=$("#area1").val();
            //完成情况
            var desc=$("#area2").val();

            var imgUrl=$(".add-homework .wrap img:eq(0)").attr("src");

            if(getstrlength(content)==0){
                toast("请填写作业内容");
                return;
            }

            if(getstrlength(desc)==0){
                toast("请填写作业完成情况");
                return;
            }

            if(isEmpty(imgUrl)){
                toast("请添加图片");
                return;
            }

            if(isNotNull(scheduleId)){
                var uuid=getUUID();
                uploadWorkImage(stuId+"",imgUrl,uuid,true,function(ret, err, remotePath){
                    // 上传图片成功
                    if (isObject(ret) && (ret.statusCode == 0)) {
                        var imgPath=ret.result;
                        //插入作业表
                        dbExecute(sql.format(scheduleId,stuId,getCurrTime(),content,desc,imgPath),true,function(ret,err){
                            if (isObject(ret) && (ret.statusCode == 0)) {
                                toast("添加成功");
                                closeWin();

                                //发送添加作业事件
                                api.sendEvent({
                                    name: 'workEvent'
                                });

                            }else{
                                toast("添加失败");
                            }
                        });
                    }else{
                        toast("上传图片失败");
                    }
                });
            }

        });

       //点击添加图片(拍照)
        $(".add-homework").on("click",".left",function(){
            if(!addImageFlag){
                getImage("camera");
            }else{
                toast("只能添加一张图片");
            }
        });
        //点击添加图片(图库)
        $(".add-homework").on("click",".right",function(){
            if(!addImageFlag){
                getImage("library");
            }else{
                toast("只能添加一张图片");
            }
        });


        function getImage(type){
            getPicture(0,0,type,function(ret,err){
                if (isObject(ret)) {
                    var url = ret.data;
                    if(isNotEmpty(url)){
                        addImageFlag=true;

                        $(".add-img-td .wrap").prepend('<div class="item-img">\
                                                            <div class="img-wrap">\
                                                            <img src=' + url + ' alt=""/>\
                                                            </div>\
                                                       </div>')
                                .find(".item-img").css("height", $(".add-img").css("height"));
                    }

                }
            });
        }*/
    };
</script>
<script>$.init();</script>
</body>
</html>






